<template>
    <div>
        <!--模糊查询-->
        <el-form :model="queryForm" label-width="80px" :inline="true">
            <el-form-item label="绑定状态">
                <el-select v-model="queryForm.roomStatus"
                           style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                           placeholder="请选择绑定状态">
                    <el-option label="已绑定" value="Binding"></el-option>
                    <el-option label="审核中" value="Auditing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="小区">
                <el-select v-model="queryForm.communityId"
                           style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                           placeholder="请选择小区">
                    <el-option
                            v-for="item in communityList"
                            :key="item.communityId"
                            :label="item.communityName"
                            :value="item.communityId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">搜索</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
        <!--查看审核记录弹窗表-->
        <div>
            <el-dialog title="审核记录表" :visible.sync="dialogTableVisible">
                <el-table :data="roomRecords">
                    <el-table-column
                            label="时间"
                            width="180" align="center">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.createTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="创建人"
                            width="180" align="center">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.createBy}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="评论"
                            width="180" align="center">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.recordAuditOpinion}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            width="180" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.roomStatus == 'Binding'" style="margin-left: 10px">已绑定</span>
                            <span v-if="scope.row.roomStatus == 'Auditing'" style="margin-left: 10px">审核中</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
        <!--审核弹出框-->
        <div>
            <el-dialog title="业主审核" :visible.sync="dialogFormVisible">
                <el-form :model="ownerRoom">
                    <el-form-item label="小区名称">
                        <el-input v-model="ownerRoom.communityName" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="楼栋名称">
                        <el-input v-model="ownerRoom.buildingName" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="单元名称">
                        <el-input v-model="ownerRoom.unitName" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="房间名称">
                        <el-input v-model="ownerRoom.roomName" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="业主姓名">
                        <el-input v-model="ownerRoom.ownerRealName" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="业主类型">
                        <el-input v-model="ownerRoom.dictLabel" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="绑定状态">
                        <el-select v-model="ownerRoom.roomStatus"
                                   style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                                   placeholder="请选择绑定状态">
                            <el-option label="已绑定" value="Binding"></el-option>
                            <el-option label="审核中" value="Auditing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="remark" autocomplete="off" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="bt">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--列表表格-->
        <el-table
                :data="ownerRooms"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    label="业主房屋编号"
                    width="120"
                    :show-overflow-tooltip="true"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.ownerRoomId}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="小区名称"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.communityName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="楼栋名称"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.buildingName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="单元名称"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.unitName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="房间名称"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.roomName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="业主姓名"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.ownerRealName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="业主类型"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.dictLabel }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="绑定状态"
                    align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.roomStatus == 'Binding'" style="margin-left: 10px">已绑定</span>
                    <span v-if="scope.row.roomStatus == 'Auditing'" style="margin-left: 10px">审核中</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="120"
                             align="center">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.roomStatus == 'Binding'"
                               style="margin-left: 10px"
                               size="mini"
                               type="text"
                               icon="el-icon-edit"
                               @click="selectRecords(scope.row.$index,scope.row)">审核记录
                    </el-button>
                    <el-button v-if="scope.row.roomStatus == 'Auditing'"
                               style="margin-left: 10px"
                               size="mini"
                               type="text"
                               icon="el-icon-edit"
                               @click="statusChange(scope.row.$index,scope.row)">审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--    分页控件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="current"
                :page-sizes="[2, 4, 6]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" align="right">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "OwnerRoom",
        data (){
            return {
                //每页条数
                size:2,
                //总条数
                total:0,
                //当前页
                current:1,
                //业主房间信息
                ownerRooms:[],
                //回显数据
                ownerRoom:{
                    ownerRoomId:"",
                    communityId:"",
                    buildingId:"",
                    unitId:"",
                    roomId:"",
                    ownerId:"",
                    ownerType:"",
                    roomStatus:"",
                    remark:"",
                    communityName:"",
                    buildingName:"",
                    unitName:'',
                    roomName:'',
                    ownerRealName:'',
                    dictLabel:''
                },
                //审核记录表
                roomRecords:[],
                //添加的记录
                ownerRoomRecord: {
                    recordAuditOpinion: '',
                    createTime: '',
                    ownerRoomId: '',
                    roomId: '',
                    communityId:'',
                    buildingId:'',
                    unitId:'',
                    roomId:'',
                    ownerId:'',
                    roomStatus: '',
                    ownerType: ''
                },
                //查询条件
                queryForm:{
                    roomStatus:"",
                    communityId:""
                },
                //小区信息集合
                communityList:[],
                //备注
                remark:"",
                //审核弹出框
                dialogFormVisible:false,
                //审核记录表
                dialogTableVisible:false
            }
        },
        methods:{
            //显示列表
            loadOwnerRoom(current,size){
                this.ownerRoom.roomStatus = this.queryForm.roomStatus;
                this.ownerRoom.communityId =this.queryForm.communityId;
                this.axios.post("http://localhost:8080/zyOwnerRoom/page?current="+this.current+"&size="+this.size,this.ownerRoom)
                    .then(res =>{
                        this.ownerRooms = res.data.data.records;
                        this.current = res.data.data.current;
                        this.size = res.data.data.size;
                        this.total = res.data.data.total
                    }
                )
            },
            //条数发生改变
            handleSizeChange(val){
                this.size = val;
                this.loadOwnerRoom(this.current,this.size);
            },
            //页数发生改变
            handleCurrentChange(val){
                this.current = val;
                this.loadOwnerRoom(this.current,this.size);
            },
            //获取所有的小区信息
            getCommunity(){
                this.axios.get("http://localhost:8080/community")
                    .then(res =>{
                        this.communityList = res.data.data
                    })
            },
            //点击搜索触发事件
            submitForm(){
                this.loadOwnerRoom(this.current,this.size);
            },
            //点击重置触发事件
            resetForm(){
                this.queryForm = {
                    roomStatus:"",
                    communityId:""
                }
                this.loadOwnerRoom(this.current,this.size);
            },
            //正在审核触发事件
            statusChange(index,row){
                console.log(row);
                this.dialogFormVisible =true;
                this.ownerRoom = JSON.parse(JSON.stringify(row));
            },
            //修改状态触发事件
            bt(){
                //修改状态
                this.axios.put("http://localhost:8080/zyOwnerRoom",this.ownerRoom)
                    .then(res =>{
                        if(res.data.data=="修改成功"){
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.loadOwnerRoom(this.current,this.size);
                        }
                    }),
                //添加修改状态的记录
                this.ownerRoomRecord.ownerRoomId = this.ownerRoom.ownerRoomId;
                this.ownerRoomRecord.roomStatus = this.ownerRoom.roomStatus;
                this.ownerRoomRecord.communityId = this.ownerRoom.communityId;
                this.ownerRoomRecord.buildingId = this.ownerRoom.buildingId;
                this.ownerRoomRecord.unitId = this.ownerRoom.unitId;
                this.ownerRoomRecord.roomId = this.ownerRoom.roomId;
                this.ownerRoomRecord.ownerId = this.ownerRoom.ownerId;
                this.ownerRoomRecord.recordAuditOpinion  = this.remark;
                this.axios.post("http://localhost:8080/record",this.ownerRoomRecord)
                    .then(res=>{
                        if(res.data.data=="添加成功"){
                           this.roomRecords = res.data.data;
                        }
                    })
                this.dialogFormVisible = false;
            },
            //查看审核记录触发事件
            selectRecords(index,row){
                this.dialogTableVisible=true;
                this.axios.post("http://localhost:8080/record/"+row.ownerRoomId)
                    .then(res =>{
                this.roomRecords = res.data.data;
            })

            },
            //多删选中按钮
            handleSelectionChange(selection) {

            },
        },
        created() {
            this.loadOwnerRoom(this.current,this.size);
            this.getCommunity();
        }
    }
</script>

<style scoped>

</style>